<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>yepjs使用说明</title>
    <link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <h1>yepjs使用说明</h1>
    <h2>概述</h2>
    <p>
        yepjs是一个超小型的js模块化框架，具有以下几个核心特性：<br/>
        1、强制要求在定义模块时使用命名空间，开发者能以此对各类代码进行有效组织，快速搭建一个层次明确、容易扩展的业务架构。<br/>
        2、yepjs所支持的模块依赖管理，使得单一模块仅需要声明自身所依赖的模块，而无需关心这些模块对其他模块的依赖。<br/>
        3、yepjs核心api只有个位数，只需要5分钟即可上手使用。
    </p>
    <h2>跟随以下步骤，即可快速上手</h2>
    <h3>第一步：定义模块</h3>
    <p>
        <pre>
    // 定义模块  yepjs.define(name, options)
    yepjs.define("test", {

        NS: "MyProject.Logic",

        field: function () {
            
            console.log("MyProject.Logic.test 执行成功");
        }
    });

    使用yepjs.define定义模块需传递2个参数，
    第一个参数[name]表示模块名称
    第二个参数[options]为js对象，其中NS表示当前定义的模块所处的命名空间，field则是模块主体，可以是任何合法的js表达式。
        </pre>
    </p>
    <h3>第二步：配置模块路径</h3>
    <p>
        <pre>
    // 配置模块路径
    yepjs.config({

        // 这里定义了jquery的路径，稍候会使用到
        jquery: "http://libs.baidu.com/jquery/1.8.0/jquery.min.js", 

        MyProject: {
            Logic: {
                test: "test.js",  // 此处test.js为相对于yep.js或yep.min.js的地址，也可以使用绝对路径
                test2: "test2.js"
            },
            Data: {
                test: "xxx.js"
            }
        }
    });
    
    大型项目往往会配置非常多的模块，推荐将配置路径的代码放置到独立的js文件中

    &lt;script src="yep.min.js" type="text/javascript" data-config="将配置文件的地址放在这里"&gt;&lt;/script&gt;
        </pre>
    </p>
    <h3>第三步：声明模块依赖</h3>
    <p>
        <pre>
    // 在每个模块的顶部声明要使用的依赖模块，此处会加载第二步定义的jquery
    yepjs.require("jquery");

    // 依赖多个模块时，也可以这样写
    yepjs.require(["jquery", "xxxx", "yyyyyy"]);

    // 定义模块
    yepjs.define("test2", {

        NS: "MyProject.Logic",

        field: function () {
            
            console.log(jQuery);  // 此处使用了jQuery
        }
    });
        </pre>
    </p>
    <h3>第四步：使用模块</h3>
    <p>
        <b>在html页面上使用：</b>
        <pre>

    yepjs.use({

        name: "MyProject.Logic.test",  // 使用字符串参数

        callback: function () {

            MyProject.Logic.test();
        }
    });

    yepjs.use({

        name: ["MyProject.Logic.test", "MyProject.Logic.test2"], // 使用数组参数

        callback: function () {

            MyProject.Logic.test();
            MyProject.Logic.test2();
        }
    });
        </pre>
        
        <b>在模块内部使用：</b>
        <pre>

    // 在模块的顶部声明要使用的依赖模块，一行一个
    yepjs.require("jquery");
    yepjs.require("MyProject.Logic.test2");

    // 定义模块
    yepjs.define("test", {

        NS: "MyProject.Logic",

        field: function () {
            console.log(jQuery);     // 使用jQuery
            MyProject.Logic.test2(); // 使用test2模块
        }
    });
        </pre>
    </p>
    <h2>公共接口</h2>
    <h3>1、js加载器</h3>
    <p>
        需要异步加载js文件时使用
        <pre>
    // 实例化一个加载器
    var loader = new yepjs.loader();

    // 加载js文件，并执行回调
    loader.load("xxxx.js", function () {
        console.log("xxxx.js 加载完成");
    });
        </pre>
    </p>
    <h2>注意事项</h2>
    <h3>1、引入一些依赖于jQuery的第三方组件时</h3>
    <p>
        <pre>

    // 某些组件往往会这样进行定义
    // 这是一个自执行的匿名函数，使用了jQuery作为参数
    
    // 声明依赖于jquery
    yepjs.require("jquery");
    
    // 组件代码
    (function(){
        // ...
        // ...
    })(jQuery);
    
    注意：以上代码会报错

    当使用yepjs加载这个组件时往往会报错，因为这个组件在jQuery加载完成之前就使用了jQuery
    需要使用以下方式进行包装

    yepjs.require("jquery", function () {
        // 组件代码
        (function(){
            // ...
            // ...
        })(jQuery);
    });

        </pre>
    </p>
    <h2>已知缺陷</h2>
    <p>
        1、yepjs强制使用命名空间来管理模块，当项目比较庞大，层级拆分过多时，会存在命名空间过长，增加记忆负担的问题。<br/>
        2、深层次的模块依赖会导致加载的文件过多，影响页面性能。
    </p>
    <p></p>
</body>
</html>